<tr:document xmlns:ui="http://java.sun.com/jsf/facelets"
             xmlns:h="http://java.sun.com/jsf/html"
             xmlns:f="http://java.sun.com/jsf/core"
             xmlns:t="http://myfaces.apache.org/tomahawk"
             xmlns:tr="http://myfaces.apache.org/trinidad"
             xmlns:trh="http://myfaces.apache.org/trinidad/html" title="Myfoon"
             styleClass="MyFoonFullPage">
    <trh:head>                
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" type="text/css"
              href="${facesContext.externalContext.request.contextPath}/style/myfoon.css"/>
        <link rel="stylesheet" type="text/css"
              href="${facesContext.externalContext.request.contextPath}/style/login.css"/>
        
        <script type="text/javascript">        
        var hints = new Array('#{messages['global.hint.email']}',
                              '#{messages['global.hint.password']}',                              
                              '#{messages['global.hint.name']}');
                              
        var error = new Array('#{messages['global.error.email']}',
                              '#{messages['global.error.password']}',
                              '#{messages['global.error.name']}',
                              '',
                              '#{messages['global.error.dateofbirth']}',
                              '#{messages['global.error.country']}');        
        </script>
        <script type="text/javascript"
                src="${facesContext.externalContext.request.contextPath}/sc/logUtils.js"></script>                
    </trh:head>
    <facet name="metaContainer">
    <tr:form>
        <div class="Login_TopBar">
            <div class="ml"/>
             
            <div class="lng">
                <tr:selectOneChoice value="#{view.locale}" simple="true"
                                    autoSubmit="true"
                                    valueChangeListener="#{locales.valueChange}"
                                    styleClass="formSelectOneChoice"
                                    contentStyle="font-size: 11px;">
                    <f:selectItems value="#{locales.localeItems}"/>
                </tr:selectOneChoice>
            </div>
        </div>
        <div class="Login_Content">
            <div class="LeftSide">
                <tr:panelGroupLayout layout="vertical">
                    <tr:outputText value="#{messages['global.whatismyfoon']}"
                                   styleClass="Foon_sp1"/>
                    <tr:spacer height="8px"/>
                    <tr:outputText value="#{messages['global.slog1']}"
                                   styleClass="Foon_sp3"/>
                </tr:panelGroupLayout>
                 
                <tr:spacer height="15px"/>
                 
                <div class="img1"></div>
                 
                <div class="su">
                    <div class="hint" id="_form_su_err1" style="display: none;">
                        <tr:outputText id="_form_su_he_msg"/>                                        
                        <div class="pointer"></div>
                    </div>
                     
                    <tr:outputText value="#{messages['global.signup']}"
                                   styleClass="Foon_sp2"/>
                     
                    <tr:spacer height="5px"/>
                     
                    <tr:panelFormLayout id="_form_su1"
                                        inlineStyle="margin-left: 10px; height: 215px;">
                        <tr:inputText id="_form_su_email"
                                      label="#{messages['global.email']}"
                                      value="#{registrationBean.user.email}"
                                      styleClass="FoonInput_Su"                                      
                                      onfocus="_form_su_validate(1, 1); return false;"/>                                                        
                        <tr:inputText id="_form_su_password"
                                      label="#{messages['global.password']}"
                                      secret="true"
                                      value="#{registrationBean.user.passwd}"
                                      styleClass="FoonInput_Su"
                                      onfocus="_form_su_validate(2, 1); return false;"/>                                                        
                        <tr:inputText id="_form_su_fullname"
                                      label="#{messages['global.fullname']}"
                                      value="#{registrationBean.user.userPi.fullname}"
                                      styleClass="FoonInput_Su"
                                      onfocus="_form_su_validate(3, 1); return false;"/>                                     
                        <tr:spacer height="3px"/>
                        <tr:selectOneChoice styleClass="Foon_Su_c"
                                            id="_form_su_gender"
                                            label="#{messages['global.gender']}"
                                            value="#{registrationBean.user.userPi.gender}"
                                            onfocus="_form_su_validate(4, 1); return false;">
                            <f:selectItem itemLabel="#{messages['global.gender.female']}"
                                          itemValue="false"/>
                            <f:selectItem itemLabel="#{messages['global.gender.male']}"
                                          itemValue="true"/>
                        </tr:selectOneChoice>
                        <tr:spacer height="3px"/>
                        <tr:panelLabelAndMessage label="#{messages['global.dateofbirth']}"
                                                 labelStyle="color: #146eb4; font-size: 11px; font-family: Tahoma;"
                                                 id="_form_su_dateofbirth">
                            <tr:panelHorizontalLayout halign="left">
                                <tr:selectOneChoice styleClass="Foon_Su_c"
                                                    id="_form_su_month"
                                                    value="#{registrationBean.currentMonth}"
                                                    onfocus="_form_su_validate(5, 1); return false;"
                                                    simple="true">
                                    <f:selectItem itemLabel="#{messages['global.month']}" itemValue="0"/>
                                    <f:selectItems value="#{registrationBean.monthList}"/>                                
                                </tr:selectOneChoice>
                                <tr:selectOneChoice styleClass="Foon_Su_c"
                                                    id="_form_su_day"                                                    
                                                    onfocus="_form_su_validate(5, 1); return false;"
                                                    value="#{registrationBean.currentDay}">                                                    
                                    <f:selectItem itemLabel="#{messages['global.day']}"
                                                  itemValue="0"/>
                                    <f:selectItems value="#{registrationBean.dayList}"/>
                                </tr:selectOneChoice>
                                <tr:selectOneChoice styleClass="Foon_Su_c"
                                                    id="_form_su_year"
                                                    onfocus="_form_su_validate(5, 1); return false;"
                                                    value="#{registrationBean.currentYear}">
                                    <f:selectItem itemLabel="#{messages['global.year']}"
                                                  itemValue="0"/>
                                    <f:selectItems value="#{registrationBean.yearList}"/>
                                </tr:selectOneChoice>
                            </tr:panelHorizontalLayout>
                        </tr:panelLabelAndMessage>
                        <tr:spacer height="3px"/>
                        <tr:selectOneChoice label="#{messages['global.country']}"
                                            id="_form_su_country"
                                            value="#{registrationBean.currentCountry}"
                                            onfocus="_form_su_validate(6, 1); return false;"
                                            styleClass="Foon_Su_cc">                                            
                            <f:selectItem itemLabel="#{messages['global.selectcountry']}"
                                          itemValue="0"/>
                            <f:selectItems value="#{registrationBean.countryList}"/>
                        </tr:selectOneChoice>
                        <tr:spacer height="5px"/>                        
                        <tr:commandButton text="#{messages['global.register']}"
                                          id="_form_su_reg1btn"                                                                                                                                             
                                          onclick="_form_su_validateAll(); return false;"/>
                        <tr:spacer height="3px"/>
                        <tr:outputText inlineStyle="font-family: Tahoma; font-size: 11px;"
                                       id="_form_su_accept"
                                       value="#{messages['global.terms.accept']}"/>
                    </tr:panelFormLayout>                    
                    <tr:panelFormLayout id="_form_su2"
                                        inlineStyle="margin-left: 10px; display: none; height: 215px;">                                        
                        <tr:outputText inlineStyle="font-family: Tahoma; font-size: 11px; font-weight: bold;"
                                       id="_form_su_type"
                                       value="#{messages['global.verification.type']}"/>
                        <t:captcha id="captchaImage"                                   
                                   imageWidth="180px" imageHeight="55px"
                                   captchaSessionKeyName="#{registrationBean.sessionKey}"/>
                        <tr:spacer height="5px"/>
                        <tr:inputText id="_form_su_captchaKey"
                                      label="#{messages['global.verification.code']}"
                                      value="#{registrationBean.captchaKey}"
                                      styleClass="FoonInput_Su"/>
                        <tr:outputText inlineStyle="font-family: Tahoma; font-size: 11px;"
                                       id="_form_su_type"
                                       value="#{messages['global.verification.sensitive']}"/>
                        <tr:spacer height="5px"/>
                        <tr:commandButton text="#{messages['global.register']}"
                                          id="_form_su_reg2btn"
                                          action="#{registrationBean.register}"/>                                          
                        <tr:spacer height="10px"/>
                        <tr:goLink text="#{messages['global.goback']}"
                                   destination="#" styleClass="FoonGoLink"
                                   onclick="hideCaptcha(); return false;"
                                   inlineStyle="font-size: 11px; color: black; font-weight: normal"/>                        
                    </tr:panelFormLayout>
                </div>
            </div>
             
            <div id="RightSide">
                <tr:outputText value="#{messages['global.login1']}"
                               styleClass="Foon_sp2"/>
                 
                <tr:panelFormLayout inlineStyle="margin-top: 10px; margin-left: 10px;">
                    <tr:inputText label="#{messages['global.email']}"
                                  styleClass="FoonInput_Lo"
                                  value="#{LoginBean.user.email}"/>
                    <tr:inputText label="#{messages['global.password']}"
                                  secret="true" styleClass="FoonInput_Lo"
                                  value="#{LoginBean.user.passwd}"/>
                    <tr:spacer height="3px"/>
                    <tr:selectBooleanCheckbox simple="true"
                                              text="#{messages['global.rememberme']}"
                                              styleClass="FoonCheckBox"/>
                    <tr:spacer height="2px"/>
                    <tr:commandButton text="#{messages['global.login2']}"                                      
                                      action="#{LoginBean.login}"/>
                    <tr:spacer height="3px"/>
                    <tr:goLink text="#{messages['global.forgotpassword']}"
                               destination="#" styleClass="FoonGoLink"
                               inlineStyle="font-size: 11px; color: black; font-weight: normal"/>                    
                </tr:panelFormLayout>
            </div>
             
            <div class="btmbar">
                <div class="mf">
                    <tr:outputText value="#{messages['global.myfoon']}"
                                   styleClass="Foon_sp5"/>
                </div>
                 
                <div class="ab">
                    <tr:panelHorizontalLayout>
                        <f:facet name="separator">
                            <tr:outputText value="|"
                                           inlineStyle="padding-left: 5px; padding-right: 5px; color: #c6d9e7"/>
                        </f:facet>
                        <tr:goLink text="#{messages['global.about']}"
                                   styleClass="FoonGoLink"
                                   inlineStyle="font-weight: normal"
                                   destination="/about"/>
                        <tr:goLink text="#{messages['global.advertise']}"
                                   styleClass="FoonGoLink"
                                   inlineStyle="font-weight: normal"
                                   destination="/advertise"/>
                        <tr:goLink text="#{messages['global.privacy']}"
                                   styleClass="FoonGoLink"
                                   inlineStyle="font-weight: normal"
                                   destination="/privacy"/>
                        <tr:goLink text="#{messages['global.help']}"
                                   styleClass="FoonGoLink"
                                   inlineStyle="font-weight: normal"
                                   destination="/help"/>
                    </tr:panelHorizontalLayout>
                </div>
            </div>
        </div>
    </tr:form>
    </facet>
</tr:document>